<template>
	<view class="topMenu">
		<view :class="{ check: checkIndex == index }" @click="goToPage(item.type)" v-for="(item, index) in menuList" :key="index">
			<view class="">{{ item.name }}</view>
			<view class="hr"></view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['checkIndex'],
	data() {
		return {
			menuList: [
				{
					name: '商家',
					type: 'store'
				},
				{
					name: '订单',
					type: 'order'
				},
				{
					name: '数据',
					type: 'data'
				}
			]
		};
	},
	methods: {
		goToPage(type) {
			let url;
			if (type == 'store') {
				url = '../index/index';
			} else if (type == 'order') {
				url = '../order/order';
			} else if (type == 'data') {
				url = '../data/datas';
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.topMenu {
	padding: 20rpx 0;
	background-color: #fff;
	padding: 20rpx;
	@include flex(flex-start, flex-start);

	> view {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		> view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #fa690a;
			margin: 0 auto;
			margin-top: 10rpx;
			display: none;
		}
	}

	> .check {
		color: #000;

		> view:nth-child(2) {
			display: block;
		}
	}
}
</style>
